<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>活动列表</title>
    <link rel="stylesheet" href="/css/elementUI.css">
    <script src="/js/vue.js"></script>
    <script src="/js/elementUI.js"></script>
    <script src="/js/axios.js"></script>
</head>
<body>



<div id="app">

    <h2>欢迎你：{{user.username}}</h2>

    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="id"
                label="序号"
                width="180">
        </el-table-column>
        <el-table-column
                prop="name"
                label="抽奖活动名称">
        </el-table-column>
        <el-table-column
                prop="state"
                label="状态">
        </el-table-column>
        <el-table-column
                label="类型">
            <template slot-scope="scope">
                {{scope.row.type==1?"登录抽奖":scope.row.type==2?"满100抽奖":scope.row.type==3?"满300抽奖":scope.row.type==4?"满500抽奖":"不知道"}}
            </template>
        </el-table-column>

        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button size="mini" @click="goDetail(scope.row.id)">进入抽奖页面</el-button>
            </template>
        </el-table-column>
    </el-table>





</div>
<script>
    new Vue({
        el:"#app",
        data:{

            tableData:[],//接收活动列表数据
            user:{},//从localStorage取

        },
        watch:{
        },
        methods:{
            goDetail(id){
                window.open("huodongDetail.html?id="+id)
            },
            initData(){
                axios.post("/huodong/findAll").then(res=>{
                    this.tableData = res.data;
                })
            }

        },
        created(){
            this.user = JSON.parse(localStorage.getItem("user"))
            this.initData()
        }
    })
</script>



</body>
</html>